<template lang="html">
  <div class="pingjia">
    <Headbar :title="title"></Headbar>
    <div class="pingjia_body">
      <p class="article">
        尊敬的贵宾:<br>
        感谢您选择凯撒旅游,一次旅游总有感触,一次交流总有收获.非常感谢您在本次旅途中对我们工作的支持与配合,我们真诚地期待您留下宝贵的意见和建议,这将是我们今后努力的方向,期待您的再次光顾!
      </p>
      <div class="input_list">
        <el-input id="inputlis"
          size="medium"
          placeholder="姓名"
          prefix-icon="el-icon-star-off"
          v-model="input_1">
        </el-input>
        <el-input id="inputlis"
          placeholder="手机号"
          prefix-icon="el-icon-mobile-phone"
          v-model="input_2">
        </el-input>
        <div class="input_list_wrap">
          <el-input id="inputlis"
            placeholder="输入验证码"
            prefix-icon="el-icon-goods"
            v-model="input_3">
          </el-input>
          <el-button type="primary">获取验证码</el-button>
        </div>
        <el-button @click="post()" class="btn_bottom" type="primary">开始评价我的旅行</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import Vue from 'vue'
import Headbar from './head'
import { Button,Input } from 'element-ui'


Vue.prototype.$ELEMENT = { size: 'middle' }
Vue.use(Button)
Vue.use(Input)
export default {
  data(){
    return{
      input_1:'',
      input_2:'',
      input_3:'',
      flag:1,

      title:'质量监督'
    }
  },
  methods:{
    post(){
      if(this.flag==1){
        if (this.input_1.length<=0) {
          this.$Message.info('姓名不能空')
        } else if(this.input_2.length!=11){
          this.$Message.info('请输入正确手机号')
        } else if (this.input_3.length<=0) {
          this.$Message.info('验证码不能空')
        }
        this.flag=0,
        setTimeout(()=>{
          this.flag=1;
        },1500)
      }

    }
  },
  components:{
    Headbar
  }
}
</script>

<style lang="css">
.pingjia_body{
  padding: 0 4%;
}
.article{
  text-align: left;
  font-size: 1.4rem;
  /*color: #9ab;*/
  line-height: 2.8rem;
  padding: 0 4%;
}
.input_list{
  margin-top: 2rem;
}
#inputlis{
  border-top: none;
  border-left: none;
  border-right: none;
}
.input_list_wrap{
  display: flex;
  justify-content: space-between;
}
.btn_bottom{
  width: 89%;
  margin-top: 2.6rem;
}

</style>
